<template>
	<view>
		<popus ref="cityalert">
			<view class='picker-bottoms'>
				<view class='picker-bottom'>
					<text @click="colosp">取消</text>
					<text @click="okpus">确定</text>
				</view>
				<picker-view v-show="visible" @change="bindChange" class="picker-view" >
					<picker-view-column>
						<view class="item" v-for="(item,index) in list" >{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in lists">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in listp" >{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</popus>
	</view>
</template>

<script>
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import {Z_threes} from '@/common/api/common/public_api.js'
	import {detail,save,namelist,city,list,dataList} from '@/common/api/job/jobapi.js'	
		export default {
			components:{
				popus
			},
			props:{
				dataSorce: {
					default: ''
				}
			},
			data(){
				return {
					txt: '选择地址',
					title: 'Hello',
					title: 'picker-view',
					visible:true,
					list: [],
					lists: [],
					listp: [],
					rundata: '',
					rundata_one: '',
					rundata_tow: '',
					citys_c: [],
					
					city_one: '',
					city_tow: '',
					
				}
			},
			onLoad() {
			},
			mounted() {
				this.citys();
			},
			methods:{
				// 获取地区
				citys(){
					let children = [];
					city({current: 1,size: -1}).then((result)=> {
						this.citys_c = Z_threes(result.data,[])
					})
				},
				bindChange(e) {
					// 第一列
					if(e.detail.value[0] !== undefined){
						
						this.city_one = this.dataSorce[e.detail.value[0]].name	// 获取第一列值（另存）
						
						this.lists = this.dataSorce[e.detail.value[0]]['children']; // 第二级赋值
						
						this.rundata = this.city_one;	// 单列 赋值
						
						if(this.dataSorce[e.detail.value[0]]['children']){		// 选择第一列后 第二列默认值
							this.rundata = this.city_one + '/' + this.lists[0].name;
						}
						
						if(this.lists[0]['children']){			// 选择第二列后 第三列默认值
							this.city_tow = this.rundata;
							this.listp = this.lists[0]['children'];	//第三级赋值
							this.rundata = this.rundata + '/' + this.lists[0]['children'][0].name;
						}else{
							this.listp = []
						}
						
					}				
					
					if(e.detail.value[1] !== undefined){
						
						this.rundata =  this.city_one + '/' + this.lists[e.detail.value[1]].name;	// 选择第二列
						
						this.listp = this.lists[e.detail.value[1]]['children'];	//第三级赋值
						
						if(this.listp){		// 选择第二列第三列默认值
							this.rundata = this.rundata + '/' + this.listp[0].name;
						}else{
							this.listp = []
						}
						
						this.city_tow = this.city_one + '/' + this.lists[e.detail.value[1]].name;	// 获取第二列值 （另存）
					}
					
					if(e.detail.value[2] !== undefined){
						
						this.rundata =  this.city_tow + '/' + this.listp[e.detail.value[2]].name;

					}
					
				},
				change(data) {
					this.txt = data.data.join('')
				},
				z_three() {
					this.$refs.cityalert.open('bottom');
					
					// 设置默认值
					this.list = this.dataSorce;
					
					this.rundata = this.list[0].name; // 第一级
					
					this.city_one = this.list[0].name;	 //  获取第一列值  (另存)
					
					if(this.dataSorce[0]['children']){	// 默认显示第二行
						
						this.lists = this.dataSorce[0]['children'];
						
						this.city_tow = this.city_one + '/' + this.dataSorce[0]['children'][0].name;
						
						this.rundata = this.rundata + '/' + this.lists[0].name  	// 第二级
						
					}
					
					if(this.dataSorce[0]['children'][0]['children']){	// 默认显示第三行
						
						this.listp = this.dataSorce[0]['children'][0]['children'];
						
						this.rundata = this.rundata + '/' + this.listp[0].name		// 第三级
						
					}   
				},
				
				colosp(){
					this.$refs.cityalert.close();
				},
				
				okpus(){
					this.list = [];
					this.$emit('cityalerts',this.rundata);
					console.log(this.rundata)
					this.$refs.cityalert.close();
				}
				
			}
		}
</script>

<style>
	.picker-bottoms{
	}
	    .picker-view {
	        width: 750rpx;
	        height: 600rpx;
			background-color: #fff;
	    }
	    .item {
	        /* height: 50px; */
	        align-items: center;
	        justify-content: center;
	        text-align: center;
	    }
		.picker-bottom {
			height: 60rpx;
			line-height: 60rpx;
			background-color: #fff;
			text-align: center;
			display: flex;
			justify-content: space-between;
			padding: 0 10px 0 10px;
		}
</style>
